<template>
  <view>
    <view class="location">
      <img class="icon-2" src="https://cdn1.visiotrip.com/h5AndMini/2023-7-19/dest-icon-2.png" alt="" srcset="">
      <view class="location-txt">当前:{{ aiDestItem.destinationName }}</view>
      <view class="location-right" @click="getLocation">
        <img
          class="location-icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-7-19/location.png"
        />
        重新定位
      </view>
    </view>
    <view class="destTitle">目的地</view>
    <view class="destBox">
      <view
        v-for="(item, index) in destList"
        :key="index"
        class="destItem"
        :class="{ active: item.destinationId == aiDestItem.destinationId }"
        @click="destClick(item)"
        :data-spmCntSuffix="'ChatTravel.destItem@1.destinationName@1'"
        :data-custom="index + 1"
        :data-spm="item"
      >
        {{ item.destinationName }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // destList: {
    //   type: Array,
    // },
    // destItem: {
    //   type: Object,
    // },
    // spmSuffix: {
    //   type: String,
    //   default: "",
    // },
  },
  components: {},
  computed: {},
  data() {
    return {
      destList: uni.getStorageSync("aiDestList")
        ? JSON.parse(uni.getStorageSync("aiDestList"))
        : [],
      aiDestItem: "",
    };
  },
  onLoad() {},
  mounted() {
    this.getDestItem()
  },
  methods: {
    getDestItem () {
      this.aiDestItem = uni.getStorageSync("aiDestItem")
      ? uni.getStorageSync("aiDestItem")
      : "";
    },
    destClick(item) {
      uni.setStorageSync('changeDest',true)
      this.aiDestItem = item;
      item.code = true
      this.$emit("destClick", item);
    },
    setDest(item) {
      this.aiDestItem = item;
    },
    getLocation() {
      let that = this
      console.log('huoqu了定位')
      wx.getLocation({
        type: "wgs84",
        success: function (res) {
          console.log("当前位置的经度：" + res.longitude);
          console.log("当前位置的纬度：" + res.latitude);
          let params = {
            latitude:res.latitude,
            longitude:res.longitude
          }
          uni.setStorageSync('location',params)
          that.getDest(params)
        },
        fail: function(error) {
          console.log(error, '55555555555')
        }
      });
    },
    // 根据经纬度获取目的地；剩余根据返回destId匹配进行切换
    async getDest(params){
      let that = this;
      let res = await this.$aiRequest({
        url: "/ai/aihub/trip/queryCity",
        method: "POST",
        params,
      })
      console.log('res',res)
      if(res.success) {
        if(!res?.data?.destId) {
          uni.showToast({
            title: '您当前所在的地点，暂未开放目的地，敬请期待~',
            icon:'none'
          })
          that.$emit('fail')
        }else {
          that.destList.map(item=>{
            if(item.destinationId == res.data.destId){
              that.destClick(item)
            }
          })
        }
      }
    },
    setDestList(){
      this.destList = uni.getStorageSync("aiDestList")
        ? JSON.parse(uni.getStorageSync("aiDestList"))
        : []
    }
  },
};
</script>

<style lang="scss" scoped>
.location {
  width: 630rpx;
  height: 120rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #eeeeee;
  position: relative;
  .icon-2{
    width: 25rpx;
    height: 15rpx;
    position: absolute;
    top: -15rpx;
    left: 15rpx;
  }
  .location-txt {
    color: #4d566a;
    font-size: 32rpx;
  }
  .location-right {
    display: flex;
    align-items: center;
    color: #4d566a;
    font-size: 32rpx;
    .location-icon {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
.destTitle {
  color: #4d566a;
  font-size: 32rpx;
  width: 630rpx;
  margin: 0 auto;
  padding: 20rpx 0 0rpx 0;
}
.destBox {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 30rpx 0;
  width: 630rpx;
  margin: 0 auto;
  .destItem {
    min-width: 190rpx;
    background: #f5f5f5;
    color: $sl-color-grey;
    font-size: 32rpx;
    text-align: center;
    line-height: 70rpx;
    margin-left: 7rpx;
    margin-right: 7rpx;
    margin-bottom: 7rpx;
    margin-top: 7rpx;
    height: 70rpx;
    border-radius: 35rpx;
    background: #F6F6F9;
  }

  .destItem.active {
    background: $sl-color-btn-background;
    color: #ffffff;
  }
}
</style>
